import * as THREE from 'three';
// console.log(THREE);


// 🔺在浏览器中渲染出一个固定视角下观察到的，黑色场景内的绿色绿色正方体的一面

//  1.创建场景
const scene = new THREE.Scene()



//  2.创建并添加相机
/* PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面 */
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)  //创建相机
/* position.set ( x : Float, y : Float, z : Float ) : this
设置该向量的x、y 和 z 分量。 */
camera.position.set(0,0,10) //设置相机位置
scene.add(camera)//在场景中添加相机



//  3. 在场景中创建并添加物体
/* BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
width — X轴上面的宽度，默认值为1。
height — Y轴上面的高度，默认值为1。
depth — Z轴上面的深度，默认值为1。*/
const cubGeometry = new THREE.BoxGeometry( 1, 1, 1 );// 创建几何立方体
const cubMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00} );// 添加材质
const cube = new THREE.Mesh( cubGeometry, cubMaterial );// 将几何体和材质组合为物体
scene.add( cube );//在场景中添加物体



//  4.设置渲染器并渲染场景
const renderer = new THREE.WebGL1Renderer() //初始化渲染器
renderer.setSize(window.innerWidth,window.innerHeight)  //设置渲染的尺寸大小
document.body.appendChild(renderer.domElement);// 将webgl渲染的内容添加到body
renderer.render(scene,camera) // 使用渲染器，通过相机将场景渲染进来
